<!--<!DOCTYPE html>-->
<!--<html lang="en">-->

<!--<head>-->
<!--    <meta charset="UTF - 8">-->
<!--    <title>Class Gender Statistics</title>-->
<!--    &lt;!&ndash; 引入js &ndash;&gt;-->
<!--    <script src="/js/socket.io.js"></script>-->
<!--    <script src="/js/jquery-3.1.1.min.js"></script>-->
<!--    <script src="/js/highcharts.js"></script>-->
<!--    <script src="/js/exporting.js"></script>-->
<!--    <script type="text/javascript">-->
<!--        // 用于存储各班级各学期男女生count总和的对象-->
<!--        var classData = {};-->
<!--        // 连接-->
<!--        var socket = io.connect('127.0.0.1:7777');-->

<!--        // 初始化图表函数-->
<!--        function initChart() {-->
<!--            return Highcharts.chart('container', {-->
<!--                chart: {-->
<!--                    type: 'pie',-->
<!--                    animation: {-->
<!--                        duration: 1000 // 设置动画持续时间为1秒-->
<!--                    }-->
<!--                },-->
<!--                title: {-->
<!--                    text: '实时班级不同学期男女生人数统计'-->
<!--                },-->
<!--                tooltip: {-->
<!--                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'-->
<!--                },-->
<!--                plotOptions: {-->
<!--                    pie: {-->
<!--                        allowPointSelect: true,-->
<!--                        cursor: 'pointer',-->
<!--                        dataLabels: {-->
<!--                            enabled: true,-->
<!--                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',-->
<!--                            style: {-->
<!--                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'-->
<!--                            }-->
<!--                        }-->
<!--                    }-->
<!--                },-->
<!--                series: [{-->
<!--                    name: '人数比例',-->
<!--                    data: []-->
<!--                }]-->
<!--            });-->
<!--        }-->

<!--        // 接收客户端发送来消息，并处理数据添加到图表-->
<!--        socket.on('semesterclassmsg', function (message) {-->
<!--            console.log("李一鸣:", message);-->
<!--            var dataArray = message.split(':');-->
<!--            var data = dataArray[1].split(',');-->
<!--            if (data.length === 4) {-->
<!--                var class_id = data[0];-->
<!--                var semester = data[1];-->
<!--                var gender = data[2];-->
<!--                var count = parseInt(data[3]);-->
<!--                if (!classData[class_id]) {-->
<!--                    classData[class_id] = {};-->
<!--                }-->
<!--                if (!classData[class_id][semester]) {-->
<!--                    classData[class_id][semester] = { maleSum: 0, femaleSum: 0 };-->
<!--                }-->
<!--                if (gender ==='male') {-->
<!--                    classData[class_id][semester].maleSum += count;-->
<!--                } else if (gender === 'female') {-->
<!--                    classData[class_id][semester].femaleSum += count;-->
<!--                }-->
<!--                updateChart();-->
<!--            }-->
<!--        });-->

<!--        // 更新图表数据的函数-->
<!--        function updateChart() {-->
<!--            var chart = Highcharts.charts['container'];-->
<!--            if (!chart) {-->
<!--                chart = initChart();-->
<!--            }-->
<!--            var data = [];-->
<!--            for (var class_id in classData) {-->
<!--                for (var semester in classData[class_id]) {-->
<!--                    var maleSum = classData[class_id][semester].maleSum;-->
<!--                    var femaleSum = classData[class_id][semester].femaleSum;-->
<!--                    var total = maleSum + femaleSum;-->
<!--                    if (total > 0) {-->
<!--                        var malePercent = (maleSum / total) * 100;-->
<!--                        var femalePercent = (femaleSum / total) * 100;-->
<!--                        data.push({-->
<!--                            name: class_id + '-' + semester +'男生',-->
<!--                            y: malePercent-->
<!--                        });-->
<!--                        data.push({-->
<!--                            name: class_id + '-' + semester +'女生',-->
<!--                            y: femalePercent-->
<!--                        });-->
<!--                    }-->
<!--                }-->
<!--            }-->
<!--            chart.series[0].setData(data, true, true); // 启用数据更新动画-->
<!--        }-->

<!--        window.onload = function () {-->
<!--            Highcharts.setOptions({-->
<!--                global: {-->
<!--                    // 设置时间，使用本地时间-->
<!--                    useUTC: false-->
<!--                }-->
<!--            });-->
<!--            updateChart();-->
<!--        };-->
<!--    </script>-->
<!--</head>-->

<!--<body>-->
<!--<div id="container" style="width: 100%;height: 100%;margin: 0 auto"></div>-->
<!--</body>-->

<!--</html>-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF - 8">
    <title>Class Gender Statistics</title>
    <!-- 引入js -->
    <script src="/js/socket.io.js"></script>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/js/highcharts.js"></script>
    <script src="/js/exporting.js"></script>
    <script type="text/javascript">
        // 用于存储各班级各学期男女生count总和的对象
        var semesterclassData = {};
        // 连接
        var socket = io.connect('127.0.0.1:7777');

        // 初始化图表函数
        function initChart() {
            return Highcharts.chart('container', {
                chart: {
                    type: 'pie',
                    animation: {
                        duration: 1000 // 设置动画持续时间为1秒
                    }
                },
                title: {
                    text: '实时班级不同学期男女生人数统计'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                series: [{
                    name: '人数比例',
                    data: []
                }]
            });
        }

        // 接收客户端发送来消息，并处理数据添加到图表
        socket.on('semesterclassmsg', function (message) {
            console.log("李一鸣:", message);
            var dataArray = message.split(':');
            var data = dataArray[1].split(',');
            if (data.length === 4) {
                var class_id = data[0];
                var semester = data[1];
                var gender = data[2];
                var count = parseInt(data[3]);
                if (!semesterclassData[class_id]) {
                    semesterclassData[class_id] = {};
                }
                if (!semesterclassData[class_id][semester]) {
                    semesterclassData[class_id][semester] = { maleSum: 0, femaleSum: 0 };
                }
                if (gender ==='male') {
                    semesterclassData[class_id][semester].maleSum += count;
                } else if (gender === 'female') {
                    semesterclassData[class_id][semester].femaleSum += count;
                }
                updateChart();
            }
        });

        // 更新图表数据的函数
        function updateChart() {
            var chart = Highcharts.charts['container'];
            if (!chart) {
                chart = initChart();
            }
            var data = [];
            for (var class_id in semesterclassData) {
                for (var semester in semesterclassData[class_id]) {
                    var maleSum = semesterclassData[class_id][semester].maleSum;
                    var femaleSum = semesterclassData[class_id][semester].femaleSum;
                    var total = maleSum + femaleSum;
                    if (total > 0) {
                        var malePercent = (maleSum / total) * 100;
                        var femalePercent = (femaleSum / total) * 100;
                        data.push({
                            name: class_id + '-' + semester +'男生',
                            y: malePercent
                        });
                        data.push({
                            name: class_id + '-' + semester +'女生',
                            y: femalePercent
                        });
                    }
                }
            }
            chart.series[0].setData(data, true, true); // 启用数据更新动画
        }

        window.onload = function () {
            Highcharts.setOptions({
                global: {
                    // 设置时间，使用本地时间
                    useUTC: false
                }
            });
            updateChart();
        };
    </script>
</head>

<body>
<div id="container" style="width: 100%;height: 100%;margin: 0 auto"></div>
</body>

</html>